基本元素 | 江离书生

正如第1章所介绍的，HTML 文档是一份结构化的文档，HTML 文档的根元素总是<html.../>元素，该元素内通常包含<head.../>和<body.../>两个子元素（HTML5 允许省略它们，HTML5 会隐式添加），这三个元素定义了 HTML 文档的基本结构。

HTML5保留的基本元素有如下几个。

：定义 HTML 注释。位于之间的内容会被当成注释处理。
<html>：它是 HTML5 文档的根元素。但 HTML5 允许完全省略这个元素。
<head>:它用于定义 HTML5 文档的页面头部分。但 HTML5 允许完全省略这个元素。
<title>：它用于定义 HTML5 文档的页面标题。
<body>：它用于定义 HTML5 文档的页面主体部分，该元素可以指定 id、class、style 等通用属性，还可以指定 onload、onunload、onclick、ondblclick、onmousedown、onmouseup、onmouseover、onmousemove、onmouseout、onkeypress、onkeydown、onkeyup 等事件属性，这些属性用于指定 JavaScript 脚本。

关于HTML5元素的事件属性，请参阅本书后面相关内容，此处不会详细介绍这些事件属性的用法。后面介绍各元素时也不再详细列出各事件属性。

<h1>到<h6>：定义标题一到标题六。
<p>：定义段落，该元素可以指定 id、class、style、dir、title 等通用属性，还可以指定 onclick 等各种事件属性。

几乎所有的 HTML 元素都可指定 id、style、class、dir、title 等通用属性。其中 id 属性用于为 HTML 元素指定一个唯一标识，该标识是通过 DOM 访问 HTML 元素的重要途径。class 和 style 属性是 CSS 样式相关属性，关于 CSS 样式的作用和用法请参考本书关于 CSS 章节的介绍。

<br>：插入一个换行，该元素可以指定 id、class、style 等通用属性。
<hr>：定义水平线，该元素可以指定 id、class、style 等通用属性，还可以指定 onclick 等各种事件属性。HTML5 中<hr/>还代表了主题结束的语义。
<div>：定义文档中的节。该元素可以指定 id、class、style、dir、title 等通用属性，还可以指定 onclick 等各种事件属性。
<span>：与<div>基本相似，区别是<span>只是表示一段一般性文本，该元素包含的文本内容默认不会换行。该元素可以指定和<div>相同的属性。

下面一份基本的HTML5文档中包含了这些元素，页面代码如下。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-Type" content="text/html; charset=utf-8"/>
    <title>基本元素</title>
</head>
<body>
    <!-- 采用标题一到标题六来输出文本 -->
    <h1>疯狂 Java 讲义</h1>
    <h2>疯狂 Android 讲义</h2>
    <h3>轻量级 Java EE 企业应用实战</h3>
    <h4>疯狂 XML 讲义</h4>
    <h5>疯狂前端开发讲义</h5>
    <h6>经典 Java EE 企业应用实战</h6>
    <!-- 输出一条水平线 -->
    <hr />
    <!-- 使用三个 span 定义段文本 -->
    <span>Tomcat</span><span>Jetty</span><span>Resin</span>
    <!-- 输出换行 -->
    <br />
    <!-- 使用三个 div 定义三节 -->
    <div>Tomcat</div><div>Jetty</div><div>Resin</div>
    <!-- 使用三个p定义三个段落 -->
    <p>Tomcat<p>Jetty<p>Resin
</body>
</html>

在浏览器种浏览上面页面，会看到如图2.1所示的效果。

基本HTML元素的效果

本书写作过程中主要使用了 Firefox 49、Opera 41、Chrome 54、Internet Explorer 11 来浏览页面，这些浏览器都对 HTML5 提供了良好的支持。以后如果不做特殊说明，本书所指的浏览器通常就是这四个浏览器的其中之一。

从上图可以看出，<span.../>、<div../>和<p.../>三个元素的效果有点类似，它们都可作为其他内容的“容器”——容纳文本和其他内容。在默认情况下，<span.../>元素不会导致换行，而<div.../>元素会导致换行，而<p.../>元素会产生一个段落，所以段落和段落之间默认有更大的间距。

除此之外，还有一点需要指出：<span.../>元素和<p.../>元素只能包含文本、图像、超链接、文本格式化元素和表单控件元素等内容，<p.../>可以包含<span.../>元素，但<span.../>不能包含<p.../>；<div.../>元素除了可以包含上面这些内容之外（包括<p.../>和<span../>），还可以包含<h1.../>到<h6.../>、<form.../>、<table.../>、列表项元素和<div.../>元素——由此可见，<div.../>元素可以包含更多内容。

正因为<div.../>元素可以包含各种各样的内容，因此在 HTML5 以前，经常会大量使用<div../>元素来完成页面布局。

正是由于<div.../>元素的滥用，导致HTML网页中语义的清晰性下降，为了避免这种情况，HTML5 规范推荐 HTML5 的文档结构元素如<article.../>、<section.../>、<nav../>等代替<div../>。